<template>
  <view class="flex-col justify-start relative page">
    <view class="flex-row justify-center items-center section_3" @click="handleBackClick">
      <image class="image_4 pos_3" src="@/static/common/back.png" />
      <text class="text">{{ $t('mine.inviteRecord') }}</text>
    </view>
    <view class="flex-col section_4 pos_4">
      <view class="flex-row justify-between group">
        <text class="font_2 text_2" :style="itemStyle(activeIndex === 0)" @click="handleTabChange"
          data-index="0">{{ $t('mine.direct') }}({{ directTotal }})</text>
        <text class="font_2 text_3" :style="itemStyle(activeIndex === 1)" @click="handleTabChange"
          data-index="1">{{ $t('mine.indirect') }}({{ indirectTotal }})</text>
      </view>
      <view class="section_5 pos_5_l" v-if="activeIndex === 0"></view>
      <view class="section_5 pos_5_r" v-if="activeIndex === 1"></view>
      <view class="flex-col relative list" v-if="activeIndex === 0">
        <view class="flex-col mt-4 list-item" v-for="(item, index) in items" :key="index">
          <view class="flex-row justify-between items-center self-stretch">
            <view class="flex-col items-start">
              <text class="font">{{ item.name }}</text>
              <text class="mt-12 font_3">{{ item.email }}</text>
            </view>
            <text class="font">{{ item.balance }} U</text>
          </view>
          <text class="self-start font_3 mt-15">{{ item.time }}</text>
        </view>
      </view>
      <view class="flex-col relative list" v-if="activeIndex === 1">
        <view class="flex-col mt-4 list-item" v-for="(item, index) in items" :key="index">
          <view class="flex-row justify-between items-center self-stretch">
            <view class="flex-col items-start">
              <text class="font">{{ item.name }}</text>
              <text class="mt-12 font_3">{{ item.email }}</text>
            </view>
            <!-- <text class="font">{{item.balance}} U</text> -->
          </view>
          <text class="self-start font_3 mt-15">{{ item.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getInvitationList } from '@/service/mine'
export default {
  components: {},
  props: {},
  computed: {
    itemStyle() {
      return (selected) => {
        const style = {};
        if (selected) {
          style.color = '#00f6ff';
        } else {
          style.color = '#ffffff80';
        }
        return style;
      }
    },
  },
  data() {
    return {
      activeIndex: 0,
      directTotal: 0,
      indirectTotal: 0,
      items: [],
    };
  },
  mounted() {
    this.getList(1).then((result) => this.directTotal = result.length);
    this.getList(2).then((result) => this.indirectTotal = result.length);
  },
  methods: {
    handleTabChange(e) {
      this.activeIndex = Number(e.target.dataset.index);
      this.getList(this.activeIndex + 1)
    },
    handleBackClick() {
      uni.navigateBack()
    },
    async getList(type) {
      const res = await getInvitationList(type);
      this.items = res.data || []
      return res.data;
    }
  },
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}

.mt-15 {
  margin-top: 0.94rem;
}

.page {
  background-color: #140c2b;
  background-image: url('@/static/common/b-home.png');
  background-size: cover;
  padding-bottom: 10rem;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;


  .section_2 {
    padding: 1.13rem 0.94rem 1.13rem 2.25rem;
    background-color: #33333300;

    .image {
      width: 1.06rem;
      height: 0.56rem;
    }

    .image_2 {
      width: 0.94rem;
      height: 0.56rem;
    }

    .image_3 {
      width: 1.5rem;
      height: 0.71rem;
    }
  }

  .pos {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }

  .section_3 {
    padding: 1rem;
    background-color: #ffffff00;

    .image_4 {
      border-radius: 0.5rem;
      width: 1.78rem;
      height: 1.78rem;
    }

    .pos_3 {
      position: absolute;
      left: 0.98rem;
      top: 1.5rem;
      transform: translateY(-50%);
    }

    .text {
      color: #ffffff;
      font-size: 1.13rem;
      font-family: PingFang SC;
      line-height: 0.83rem;
    }
  }

  .pos_2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 3rem;
  }

  .section_4 {
    padding: 0 0.75rem;
    background-color: #ffffff33;
    border-radius: 1rem;
    box-shadow: 0rem -0.75rem 1.5rem #a20a6d1a inset, 0rem 0.5rem 1rem #00000026;
    backdrop-filter: blur(1rem);

    .group {
      padding: 1.25rem 3.5rem 0.5rem;
      border-bottom: solid 0.031rem #ffffff1a;

      .font_2 {
        font-size: 0.88rem;
        font-family: PingFang SC;
        line-height: 0.82rem;
      }

      .text_2 {
        color: #00f6ff;
      }

      .text_3 {
        color: #ffffff80;
      }
    }

    .section_5 {
      background-color: #00f6ff;
      border-radius: 0.75rem;
      width: 1.5rem;
      height: 0.13rem;
    }

    .pos_5_l {
      position: absolute;
      left: 5.88rem;
      top: 2.5rem;
    }

    .pos_5_r {
      position: absolute;
      right: 5.88rem;
      top: 2.5rem;
    }

    .list {
      padding: 0.75rem 0 1.38rem;

      .list-item {
        padding: 0.75rem 0.5rem;
        background-color: #0000001a;
        border-radius: 0.5rem;

        &:first-child {
          margin-top: 0;
        }

        .font_3 {
          font-size: 0.63rem;
          font-family: PingFang SC;
          line-height: 0.46rem;
          color: #ffffff80;
        }
      }
    }
  }

  .pos_4 {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 3.2rem;
    bottom: 1rem;
  }

  .font {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.56rem;
    color: #ffffff;
  }
}
</style>